
// 上一张卡片
let previousCard = document.querySelector('#login-container')

// 登录卡片监听
document.querySelector('#login-container .form').addEventListener('click', function (e) {
    if (e.target.closest('#login-button')) {
        login()
    } else if (e.target.closest('.to-register')) {
        changeCard(document.querySelector('#register-container'))
    } else if (e.target.closest('.to-reset-password')) {
        changeCard(document.querySelector('#reset-password-container'))
    }
})

// 注册卡片监听
document.querySelector('#register-container').addEventListener('click', function (e) {
    if (e.target.closest('#register-button')) { // 注册按钮
        register()
    }
    else if (e.target.closest('.cancel')) { // 取消按钮
        changeCard(document.querySelector('#login-container'))
    }
})

// 重置密码卡片监听
document.querySelector('#reset-password-container').addEventListener('click', function (e) {
    if (e.target.closest('#reset-password-button')) { }
    else if (e.target.closest('.cancel')) {
        changeCard(document.querySelector('#login-container'))
    }
})

// 结果卡片监听
document.querySelector('#result-container').addEventListener('click', function (e) {
    if (e.target.closest('.to-login')) {
        changeCard(document.querySelector('#login-container'))
    }
})

// 切换卡片
function changeCard(target) {
    target.classList.remove('hidden');
    var containers = document.querySelectorAll('.container');
    containers.forEach(function (container) {
        if (container !== target && container !== previousCard)
            container.classList.add('hidden');
    });
    previousCard.scrollIntoView();
    target.scrollIntoView({ behavior: "smooth" });
    previousCard = target;
}

// 登录
function login() {
    var username = document.querySelector('#login-username-input').value
    var password = document.querySelector('#login-password-input').value
    var message = document.querySelector('#login-container .error-message')

    // 验证用户名, 密码
    if (username === '' || password === '') {
        message.innerText = '请填写完整信息'
        message.style.visibility = 'visible'
        return;
    }
    let resUsername = validateUsername(username)
    if (resUsername !== '') {
        message.innerText = resUsername
        message.style.visibility = 'visible'
        return;
    }
    let resPassword = validatePassword(password)
    if (resPassword !== '') {
        message.innerText = resPassword
        message.style.visibility = 'visible'
        return;
    }

    let route = `/user/login?username=${username}&password=${password}`
    // 发送请求
    axiosInstance.post(route).then(res => {
        if (res.data.code === 0) {
            localStorage.setItem('token', res.data.data)
            localStorage.setItem('username', username)
            window.location.href = './'
        } else {
            message.innerText = res.data.message;
            message.style.visibility = 'visible';
        }
    }).catch(err => {
        console.error(err)
    })
}

// 注册
function register() {
    let username = document.querySelector('#register-username-input').value
    let password = document.querySelector('#register-password-input').value
    let email = document.querySelector('#register-email-input').value
    let message = document.querySelector('#register-container .error-message')

    // 验证用户名, 密码, 邮箱
    if (username === '' || password === '' || email == '') {
        message.innerText = '请填写完整信息'
        message.style.visibility = 'visible'
        return;
    }
    let resUsername = validateUsername(username)
    if (resUsername !== '') {
        message.innerText = resUsername
        message.style.visibility = 'visible'
        return;
    }
    let resPassword = validatePassword(password)
    if (resPassword !== '') {
        message.innerText = resPassword
        message.style.visibility = 'visible'
        return;
    }
    let resEmail = validateEmail(email)
    if (resEmail !== '') {
        message.innerText = resEmail
        message.style.visibility = 'visible'
        return;
    }

    let route = `/user/register?username=${username}&password=${password}&email=${email}`

    // 发送请求
    axiosInstance.post(route).then(res => {
        if (res.data.code === 0) {
            document.querySelector('#result-container span').innerText = '注册成功';
            changeCard(document.querySelector('#result-container'));
        } else {
            message.innerText = res.data.message;
            message.style.visibility = 'visible';
        }
    }).catch(err => {
        console.error(err)
    })
}